<template>
  <div class="home-container">
    <div class="heard-bg">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="img-bg" :src="toUrl + image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="search">
      <div class="city" @click="$router.push('/city')">
        <span class="my-city">{{ $store.state.city }}</span>
        <i class="iconfont icon-arrow"></i>
      </div>
      <div class="my-sarch">
        <i class="iconfont icon-seach"></i>
        <span class="text">请输入小区或地址</span>
      </div>
    </div>
    <i class="iconfont icon-map" @click="$router.push('/map')"></i>
    <!-- 中间区域 -->
    <div class="am-flexbox">
      <van-grid clickable :border="false">
        <van-grid-item @click="jointRentHouse(true)">
          <img src="@/assets/imgs/2.png" alt="" />
          <h2>整租</h2>
        </van-grid-item>
        <van-grid-item @click="jointRentHouse(false)" class="magitem">
          <img src="@/assets/imgs/4.png" alt="" />
          <h2>合租</h2>
        </van-grid-item>
        <van-grid-item class="magitem" to="/map">
          <img src="@/assets/imgs/3.png" alt="" />
          <h2>地图找房</h2>
        </van-grid-item>
        <van-grid-item
          class="magitem"
          :to="$store.state.user ? '/add' : '/login'"
        >
          <img src="@/assets/imgs/1.png" alt="" />
          <h2>去出租</h2>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- cell -->
    <div class="group">
      <h3 class="group-title">租房小组 <span class="more">更多</span></h3>
      <van-grid :column-num="2" :gutter="10">
        <van-grid-item v-for="item in GroupsList" :key="item.id">
          <img :src="toUrl + item.imgSrc" alt="" />
          <div class="right">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { TotalUrl } from '@/utils/TotalUrl.js'
import { mapActions } from 'vuex'
import { getSwiper, getGroups, getCityInfo } from '@/api'
export default {
  name: 'homeContainer',
  components: {},
  props: {},
  data() {
    return {
      toUrl: TotalUrl,
      images: [],
      id: null,
      // 租房信息数组
      GroupsList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSwiper()
    this.getCtiyInfoByName()
    // this.getCityMapByValue()
  },
  methods: {
    ...mapActions(['getNewHouseList']),
    // 获取轮播图
    async getSwiper() {
      // 提示loading
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await getSwiper()
      res.body.forEach((item) => {
        this.images.push(item.imgSrc)
      })
      this.$toast.clear()
    },
    // 获取房源信息
    async getCtiyInfoByName() {
      const { data: res } = await getCityInfo({
        name: this.$store.state.city
      })
      this.$store.commit('setCityValue', res.body.value)
      const { data: ref } = await getGroups({
        id: res.body.value
      })
      this.GroupsList = ref.body
    },
    // 租房方式
    jointRentHouse(val) {
      this.$router.push('/house')
      this.getNewHouseList(val)
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  position: relative;
  background-color: #ffffff;
  .my-swipe .van-swipe-item {
    height: 424px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    .img-bg {
      width: 100%;
      height: 424px;
    }
  }
  .search {
    position: absolute;
    top: 50px;
    left: 20px;
    border-radius: 5px;
    z-index: 999;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    width: 620px;
    height: 68px;
    margin: 0 20px;
    padding: 10px 10px 10px 16px;
    .city {
      display: flex;
      justify-content: center;
      align-items: center;
      .my-city {
        font-size: 28px;
      }
      i.icon-arrow {
        margin-left: 2px;
        font-size: 12px;
        color: #7f7f80;
      }
    }
    .my-sarch {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20px;
      border-left: 1px solid #e5e5e5;
      .text {
        padding-left: 8px;
        font-size: 26px;
        color: #9c9fa1;
      }
      i {
        padding: 0 4px 0 24px !important;
        font-size: 30px;
        color: #9c9fa1;
      }
    }
  }
  i.icon-map {
    position: absolute;
    top: 60px;
    right: 20px;
    font-size: 50px;
    color: #fff;
  }
  /deep/ .van-swipe__indicators {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 10px;
    width: 100%;
    height: 16px;
    text-align: center;
    i.van-swipe__indicator {
      display: block;
      width: 16px !important;
      height: 16px !important;
      margin: 0 6px;
      border-radius: 50%;
      background: #ccc;
    }
    i.van-swipe__indicator--active {
      background: #888888 !important;
    }
  }
  .am-flexbox {
    height: 245px;
    /deep/ .van-grid-item__content {
      padding: 20px 0 !important;
    }
    /deep/ .van-grid {
      height: 245px !important;
      img {
        width: 120px !important;
        height: 120px !important;
      }
      h2 {
        font-weight: 400;
        font-size: 28px;
        margin: 25px 0;
      }
    }
  }
  .group {
    height: 375px;
    padding: 0px;
    background-color: #f6f5f6;
    .group-title {
      position: relative;
      padding: 30px 0 30px 20px;
      margin: 0;
      font-size: 30px;
      .more {
        color: #787d82;
        position: absolute;
        right: 20px;
        font-size: 28px;
        font-weight: 400;
      }
    }
    /deep/ .van-grid {
      .van-grid-item {
        width: 345px;
        height: 120px;
        .van-grid-item__content {
          margin-bottom: 20px;
          padding: 0 !important;
          flex-direction: row !important;
          justify-content: start;
          img {
            width: 100px;
            height: 100px;
            margin: 0 20px;
          }
          .right {
            p {
              font-size: 20px !important;
            }
          }
        }
      }
    }
  }
}
</style>
